<template>
  <div class="form-demo">
    {{ initialValues.username }}
    <Form
      :rule="formRules"
      :initial-values="initialValues"
      @submit="handleSubmit"
      layout="vertical"
      title="表单实列"
    >
      <FormItem name="username" v-slot="{ field }" label="用户名">
        <OLabel>
          <OCheckbox 
            :model-value="field.value"
            @update:model-value="field.onChange"
            :value="items[0].id"
          />
          {{items[0].label}}
        </OLabel>
        <OLabel>
          <OCheckbox 
            :model-value="field.value"
            @update:model-value="field.onChange"
            :value="items[1].id"
          />
          {{items[1].label}}
        </OLabel>
      </FormItem>
      <OButton type="primary" native-type="submit">
        提交
      </OButton>
    </Form>
  </div>
</template>

<script setup>

import { OInput } from '@libc/orange-ui'
import { OButton } from '@libc/orange-ui'
import * as zod from 'zod'
import { toTypedSchema } from '@vee-validate/zod'
import { computed, ref } from 'vue'
import FormItem from '../../../packages/orange-ui/components/form/src/formItem.vue'

// 表单验证规则
const formRules = {
  username: zod.array(zod.string()).min(1, { message: '至少需要选择一个选项' }),
}

const items = [
  {
    id: 'recents',
    label: 'Recents',
  },
  {
    id: 'home',
    label: 'Home',
  },
]




// // 转换为vee-validate验证模式
// const validationSchema = computed(() => {
//   return toTypedSchema(zod.object(formRules))
// })

// 表单初始值
const initialValues = {
  username: [], // 确保初始值是空数组
}


// 提交表单处理函数
const handleSubmit = (values) => {
  alert('提交成功: ' + JSON.stringify(values))
}
</script>

<style scoped>
.form-demo {
  padding: 20px;
  border: 1px solid #ccc;
  width: 500px;
  height: 500px;
}
</style>